{% extends "base_generic.html" %}
{% block script %}
<script type="text/javascript">
  function generateUrl(name) {
    var sanitizedName = name;
    sanitizedName = string_to_slug(sanitizedName);
    $("#url").val(sanitizedName);
  }
  function generateUrl2(name) {
     var sanitizedName = name;
     sanitizedName = string_to_slug(sanitizedName);
     $("#url_es").val(sanitizedName);
   }

  $(window).load(
    function() {
      arraymain = new Array();
      arraymain['imagetype']='main';
      imageUploader('mainimage', '{{filekey}}', 'addImageMain', arraymain);
      arraynormal = new Array();
      arraynormal['imagetype']='normal';
      imageUploader('normalimage', '{{filekey}}', 'addImage', arraynormal);

      $( "#avDate" ).datepicker({ dateFormat: 'yy-mm-dd 00:00:00.000000' });
    });
    

  function addImageMain(key) {
    $(".imgmain").remove();
    var strhtml="<img src=\"/image/" + key + "/\" width=\"215\" class=\"imgmain\" />";
    $('#images').append(strhtml);
  }

  function addImage(key) {
    var strhtml="<img src=\"/image/" + key + "/75/75/cropped/\" width=\"75\" height=\"75\" id=\"" + key + "\" />";
    strhtml += "<a href=\"#\" onclick=\"deleteImage('{{ image.key }}'); return false;\" class=\"image-deleter\" id=\"deleter-{{ image.key }}\">X</a>"
    $('#images').append(strhtml);
  }


  function deleteImage(key) {
    $.post('/admin/image/delete/' + key + '/');
    $('#' + key).remove();
    $('#deleter-' + key).remove();
  }

</script>
{% endblock %}
{% block content %}
        <h1>Song</h1>
        <form action="/admin/songs/{{ songid }}/save/" method="post">
        
        <div class="line en">
          <div class="field">
            <label>Artist</label>
            <input id="artist" name="artist" type="text" size="2" value="{{ artist }}" />
          </div>
          <div class="field">
            <input id="title" name="title" type="text" size="65" value="{{ title }}" onblur="generateUrl(this.value);" />
          </div>
          <div class="field">
            <input id="url" name="url" type="text" size="50" value="{{ url }}" />
          </div>
         </div>
         <div class="line">
           <div class="field">
             <textarea cols="30" rows="4" id="descripcion" name="description">{{ description }}</textarea>
           </div>
        </div>
        <div class="line">
           <div class="field">
             <input id="tags" name="tags" type="text" size="65" value="{{ tags }}" />
           </div>
        </div>

        <input type="submit" value="Guardar" id="save" name="save" /><br class="clear" />
      </form>
      <br class="clear" />

{% endblock %}
      